<template>
	<view class="container">
		<Loading v-if="loading">正在努力加载中...</Loading>
		<template v-else>
			<view class="main">
				<RouteMakeNav :curProgress="0" @navBack="goBack" @navForward="goForward"></RouteMakeNav>
				<Collection 
				:curDistrict="curDistrict"
				:attractions="attractions"
				:selectedIds="selectedIds"
				:selectedItems="selectedItems"
				@changeDistrict="handleChangeDistrict"
				@addAttraction="handleAddAttraction"></Collection>
			</view>
		</template>
	</view>
</template>

<script>
	import Loading from "@/components/Loading/Loading.vue"
	import Collection from "./components/Collection.vue"
	import * as AttractionApi from "@/api/attractions/attraction.js"
	import RouteMakeNav from "./components/RouteMakeNav.vue"
	
	export default {
		components:{
			Collection,
			Loading,
			RouteMakeNav
		},
		data() {
			return {
				selectedIds:[],
				selectedItems:[],
				loading:false,
				attractions:[],
				curDistrict:'',
				pageNum:1,
			}
		},
		
		watch:{
			selectedItems(){
				this.$store.dispatch("route/setPreAttractions",this.selectedItems)
			}
		},
		methods:{
			goBack(){
				// 回到第一步
				uni.navigateBack()
			},
			goForward(){
				// 去第三步
				if(this.selectedItems.length === 0){
					this.$confirm({content:"你还未选择景点哦~"})
					return
				}
				const action = 'add'
				this.$navTo("pages/chux/addroute3",{action})
			},
			handleChangeDistrict(district){
				this.curDistrict = district
				this.attractions = []
				this.getAttractions()
			},
			getAttractions(){
				this.loading = true
				const options = {
					...this.$store.getters.routeOptions,
					district:this.curDistrict,
					pageNum:this.pageNum 
				}
				AttractionApi.getAttractions(options)
							.then(data => {
								if(this.attractions.length > 0){
									this.attractions = this.attractions.concat(data.rows)
								}else{
									this.attractions = data.rows
								}
								
							})
							.catch(error => {
								console.log(error)
								this.$error(`${error}`)
							})
				this.loading = false
			},
			handleAddAttraction(item){
				const attraction_index = this.selectedIds.indexOf(item.id);
				if(attraction_index === -1){
					// 添加景点
					if(this.selectedIds.length > 4){
						this.$confirm({content:"你只能选择五个以内的景点"})
						return	
					}
					this.selectedIds.push(item.id)
					this.selectedItems.push(item)
				}else{
					// 删除景点
					this.selectedIds.splice(attraction_index,1)
					this.selectedItems.splice(attraction_index,1)
				}
				
			},
			
		},
		onLoad(){
			this.getAttractions()
		},
		onReachBottom(){
			this.pageNum += 1
			this.getAttractions()
		},
		onShow(){
			// 获取已选择的景点对象列表
			this.selectedItems = this.$store.getters.preparedAttractions
			// 根据id封装景点id对象
			this.selectedIds = this.selectedItems.map(spot => spot.id)	
		}
	}
</script>

<style lang="scss">
page{
		background-color: #FFFFFF;
		min-height: 100vh;
		overflow:scroll;
	}
	.container{
		position:relative;
		display: flex;
		background-color: #FFFFFF;
		height: 100%;
		.main{
				margin: auto;
				width: 600rpx;
			
				display: flex;
				align-items: center;
				flex-direction:column;
				gap:18px;
			.Row1{
				width: 300px;
				height: 35px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.setp1{
					width: 72px;
					height: 25px;
					margin-left: 12px;
					margin-right: 6px;
					border-radius: 0px 10px 10px 10px;
					background: rgba(232, 89, 12, 1);
					border: 1px solid rgba(0, 0, 0, 1);
				}
				image{
					margin-right: 2px;
					width: 72px;
					height: 25px;
				}
			}
			.Row2{
				width: 300px;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				text-align: center;
				vertical-align: top;
				.one{
				
					font-size: 20px;
					font-weight: 700;
					letter-spacing: 0px;
					
					color:#333;
				}
				.two{
					margin-top: 12px;
					color:#666;
				}
			}
		}
	}
</style>
